<template>
  <div class="login">
    <el-container>
      <el-main>
        <div class="picture-view">
          <div class="left-up"><img src="../assets/logo.png">Fly Admin</div>
        </div>
      </el-main>
      <el-aside width="469px">
        <div class="login-view">
          <div class="theme-controller">
            <!-- 主题色 -->
            <el-color-picker class="theme" v-model="color" size="small"/>
            <el-button class="theme" size="small" @click="toggleLayout">
              <el-icon>
                <Grid/>
              </el-icon>
            </el-button>
            <el-button class="theme" size="small" @click="toggleLang">
              {{ locale === 'zh' ? 'En' : '中' }}
            </el-button>
            <el-button class="theme" size="small" @click="toggleDark">
              <el-icon>
                <Sunny v-if="!isDark"/>
                <Moon v-else/>
              </el-icon>
            </el-button>
          </div>
          <div class="welcom" style="display: flex; font-size: 35px; margin-bottom: 0px; padding-bottom: 0px">
            <h1>欢迎回来</h1><img class="Dora" src="../assets/Doraemon.svg" >
          </div>
          <p style="color: #999999; font-size: 13px; margin-top: 0px; padding-top: 0px">
            请输入您的账户信息以开始管理您的项目
          </p>
          <el-form :model="form" :rules="rules" ref="formRef" class="inp">
            <!-- 选择 -->
            <el-form-item prop="value">
              <el-select v-model="value" placeholder="请选择" popper-class="custom-select">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>

            <!-- 用户名 -->
            <el-form-item prop="name">
              <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                  type="password"
                  v-model="form.password"
                  placeholder="请输入不小于6位数密码"
                  show-password
              ></el-input>
            </el-form-item>

            <!-- 滑块验证 -->
            <el-form-item>
              <div class="slider-wrapper">
                <div class="slider-container" ref="containerRef"
                     :class="{ 'is-error': !isVerified && isFormSubmitted }">
                  <div
                      class="slider-mask"
                      :style="{ width: sliderMaskWidth }"
                  />
                  <div
                      class="slider"
                      @mousedown="handleDragStart"
                      :class="{ 'slider-success': isVerified }"
                      :style="{ left: sliderLeft }"
                  >
                    <el-icon>
                      <DArrowRight/>
                    </el-icon>
                  </div>
                  <div
                      class="slider-text"
                      :class="{ 'slider-text-success': isVerified }"
                  >
                    {{ isVerified ? "验证通过" : "将滑块拖动至右侧完成验证" }}
                  </div>
                </div>
                <div v-if="!isVerified && isFormSubmitted" class="el-form-item__error">
                  请完成滑块验证
                </div>
              </div>
            </el-form-item>

            <!-- 记住账号和忘记密码 -->
            <el-form-item class="remember-forgot">
              <div class="remember-forgot-container">
                <el-checkbox v-model="rememberMe">记住账号</el-checkbox>
                <el-link type="primary" underline="never" class="forgot-password" @click="handleForgotPassword">
                  忘记密码?
                </el-link>
              </div>
            </el-form-item>

            <!-- 登录按钮 -->
            <el-form-item>
              <el-button type="primary" style="width: 100%;" @click="submitForm">登录</el-button>
            </el-form-item>

            <!-- 手机号登录和扫码登录 -->
            <el-form-item>
              <el-button style="width: 45%; margin-right: 5%;" @click="phoneLogin">手机号登录</el-button>
              <el-button style="width: 45%;" @click="scanLogin">扫码登录</el-button>
            </el-form-item>

            <!-- 其他登录方式 -->
            <div class="other-login">
              <span class="other-login-title">其他登录方式</span>
              <div class="icons">
                <div><img src="../assets/QQ.svg" alt="QQ" width="20"/></div>
                <div><img src="../assets/weixin.svg" alt="WeChat" width="20"/></div>
                <div><img src="../assets/github.svg" alt="GitHub" width="20"/></div>
                <div><img src="../assets/guge.svg" alt="Google" width="20"/></div>
              </div>
            </div>

            <!-- 创建账号链接 -->
            <div class="create-account"
                 style="display: flex;justify-content: center;align-content: center;margin-top: 0">
              <p style="margin-right: 5px;color: rgb(91,94,96)">还没有账号?</p>
              <el-link type="primary" underline="never">创建账号</el-link>
            </div>

          </el-form>
          <p style="text-align: center;color: rgb(113,113,122);font-size: 13px">Copyright © 2024 Fly</p>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script setup>
import {ref, onUnmounted, watch} from "vue";
import {ElButton, ElIcon} from 'element-plus';
import {ElForm} from 'element-plus';
import {DArrowRight, Grid, Moon, Sunny} from "@element-plus/icons-vue";
import router from "@/router/index.js";

const formRef = ref(null);
const value = ref('Super');
const form = ref({
  name: '',
  password: ''
});
// 记住账号
const rememberMe = ref(false)
const phoneLogin = () => {
};
const scanLogin = () => {
};
const handleForgotPassword = () => {
};
// 主题色
const color = ref('#409eff')
watch(color, val => {
  document.documentElement.style.setProperty('--el-color-primary', val)
})
// 滑块验证相关引用
const containerRef = ref(null);
const sliderRef = ref(null);
const sliderLeft = ref("0px");
const sliderMaskWidth = ref("0px");
const isVerified = ref(false);

// 表单是否被提交过，用于控制错误显示
const isFormSubmitted = ref(false);

// 拖动相关变量
let startX = 0;
let sliderLeft_temp = 0;

const rules = {
  name: [
    {required: true, message: '请输入用户名', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    {min: 6, message: '密码至少6位', trigger: 'blur'}
  ]
};

const options = [
  {
    value: 'Super',
    label: 'Super',
  },
  {
    value: 'Admin',
    label: 'Admin',
  },
  {
    value: 'User',
    label: 'User',
  },
];

/**
 * 开始拖动处理
 * @param e 鼠标事件对象
 */
const handleDragStart = (e) => {
  if (isVerified.value) return;
  startX = e.clientX;
  sliderLeft_temp = parseInt(sliderLeft.value);
  document.addEventListener("mousemove", handleDragMove);
  document.addEventListener("mouseup", handleDragEnd);
}

/**
 * 拖动过程处理
 * @param e 鼠标事件对象
 */
const handleDragMove = (e) => {
  if (isVerified.value) return;
  const container = containerRef.value;
  if (!container) return;

  const diff = e.clientX - startX;
  const containerWidth = container.offsetWidth;
  const sliderWidth = 40; // 调整滑块宽度与表单元素一致
  const maxLeft = containerWidth - sliderWidth;

  let newLeft = sliderLeft_temp + diff;
  if (newLeft < 0) newLeft = 0;
  if (newLeft > maxLeft) newLeft = maxLeft;

  sliderLeft.value = newLeft + "px";
  sliderMaskWidth.value = newLeft + sliderWidth / 2 + "px";

  if (newLeft === maxLeft) {
    isVerified.value = true;
    handleDragEnd();
  }
}

/**
 * 结束拖动处理
 */
const handleDragEnd = () => {
  if (!isVerified.value) {
    sliderLeft.value = "0px";
    sliderMaskWidth.value = "0px";
  }
  document.removeEventListener("mousemove", handleDragMove);
  document.removeEventListener("mouseup", handleDragEnd);
}

const submitForm = () => {
  // 标记表单已被提交
  isFormSubmitted.value = true;

  if (!formRef.value) return;

  formRef.value.validate((valid) => {
    if (valid) {
      // 检查滑块验证是否完成
      if (!isVerified.value) {
        // 可以在这里添加一个临时的错误状态显示
        return false;
      }
      console.log('提交成功', form.value);
      router.push('/home');
    } else {
      console.log('验证失败');
      return false;
    }
  });
}

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  // 重置滑块验证状态
  isVerified.value = false;
  isFormSubmitted.value = false;
  sliderLeft.value = "0px";
  sliderMaskWidth.value = "0px";
}

// 组件卸载时清理事件监听
onUnmounted(() => {
  document.removeEventListener("mousemove", handleDragMove);
  document.removeEventListener("mouseup", handleDragEnd);
});
</script>

<style scoped>
.login {
  display: flex;
}
.el-main{
  padding: 0;
}
.theme-controller {
  display: flex;
  background-color: rgb(243, 244, 246);
  height: 25px;
  width: 152px;
  border-radius: 20px;
  margin: 12px 200px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.theme{
  width: 20px;
}

.left-up {
  position: relative;
  z-index: 10;
  color: #03fdf5;
  font-size: 20px;
  font-weight: bold;
  padding: 20px;
  display: flex;
  align-items: center;
}

.left-up img {
  width: 50px;
  margin-right: 10px;
  border-radius: 50px;
}

.Dora {
  width: 50px;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-left: 15px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.picture-view {
  width: 100%;
  height: 100%;
  background-image: url("../assets/back.png");
  border-radius: 20px;
  background-size: cover;
  position: relative;
}

.picture-view::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../assets/back.png");
  background-size: cover;
  filter: blur(5px);
  z-index: -1;
}

.login-view {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
  box-sizing: border-box;
}

.inp {
  width: 100%;
}

.slider-wrapper {
  width: 100%;
}

/* 滑动验证码容器样式 */
.slider-container {
  position: relative;
  width: 100%;
  height: 32px;
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 错误状态样式 */
.slider-container.is-error {
  border-color: #f56c6c;
}

/* 滑动遮罩层样式 */
.slider-mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: rgb(87, 209, 136);
  border-radius: 4px;
  transition: width 0.1s linear;
}

/* 滑块按钮样式 */
.slider {
  position: absolute;
  top: 0;
  width: 40px;
  height: 30px;
  background: #f5f5f5;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #909399;
  z-index: 10;
  box-sizing: border-box;
}

.slider:hover {
  border-color: #c0c4cc;
  color: #606266;
  cursor: move;
}

/* 验证成功时滑块样式 */
.slider-success {
  background-color: white;
  border-color: #d1edc3;
  color: rgb(104, 106, 113);
}

/* 提示文本样式 */
.slider-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  font-weight: 400;
  font-size: 12px;
  color: #909399;
  width: auto;
  pointer-events: none;
  white-space: nowrap;
}

/* 验证成功时文本样式 */
.slider-text-success {
  color: white;
}

.other-login-title {
  position: relative;
  color: #999;
  font-size: 14px;
  margin: 20px 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.other-login-title::before,
.other-login-title::after {
  content: '';
  height: 1px;
  background-color: #ddd;
  flex: 1;
}

.other-login-title::before {
  margin-right: 12px;
}

.other-login-title::after {
  margin-left: 12px;
}

/* 表单错误信息样式 */
.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
}

/* 其他登录方式 */
.other-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.other-login span {
  font-size: 14px;
  color: #999;
}

.icons {
  display: flex;
  margin-top: 0;
}

.icons div {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.icons div img {
  width: 20px;
  height: 20px;
}

.icons div:hover {
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); /* 扩散圆圈 */
  border-radius: 50%;
}

/* 记住账号和忘记密码容器 */
.remember-forgot-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* 创建账号链接 */
.create-account {
  text-align: center;
  margin-top: 20px;
}
</style>
